<?php
/**
 * Magento
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Academic Free License (AFL 3.0)
 * that is bundled with this package in the file LICENSE_AFL.txt.
 * It is also available through the world-wide-web at this URL:
 * http://opensource.org/licenses/afl-3.0.php
 * If you did not receive a copy of the license and are unable to
 * obtain it through the world-wide-web, please send an email
 * to license@magentocommerce.com so we can send you a copy immediately.
 *
 * DISCLAIMER
 *
 * Do not edit or add to this file if you wish to upgrade Magento to newer
 * versions in the future. If you wish to customize Magento for your
 * needs please refer to http://www.magentocommerce.com for more information.
 *
 * @copyright   Copyright (c) 2014 X.commerce, Inc. (http://www.magentocommerce.com)
 * @license     http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
 */
?>
<?php /** @var $this Magento\Shipping\Block\Adminhtml\Order\Tracking */?>
<script type="text/javascript">
require(['prototype'], function(){

    //<![CDATA[
    var trackingControl;
    trackingControl = {
        index : 0,
        add : function () {
            this.index++;
            var data = {index:this.index};
            Element.insert($('track_row_container'), {bottom: this.template.evaluate(data)});
            $('trackingC' + this.index).disabled = false;
            $('trackingT' + this.index).disabled = false;
            $('trackingN' + this.index).disabled = false;
            this.bindCurrierOnchange();
        },
        deleteRow : function(event) {
            var row = Event.findElement(event, 'tr');
            if (row) {
                row.parentNode.removeChild(row)
            }
        },
        bindCurrierOnchange : function() {
            var elems = $('tracking_numbers_table').select('.select');
            elems.each(function (elem) {
                if (!elem.onchangeBound) {
                    elem.onchangeBound = true;
                    elem.valueInput = $(elem.parentNode.parentNode).select('.number-title')[0];
                    elem.observe('change', this.currierOnchange);
                }
            }.bind(this));
        },
        currierOnchange : function(event) {
            var elem = Event.element(event);
            var option = elem.options[elem.selectedIndex];
            if (option.value && option.value != 'custom') {
                elem.valueInput.value = option.text;
            }
            else {
                elem.valueInput.value = '';
            }
        }
    };

    window.trackingControl = trackingControl;
    //]]>

});
</script>
<table cellspacing="0" class="data-table" id="tracking_numbers_table">
    <thead>
    <tr class="headings">
        <th class="col-carrier"><?php echo __('Carrier') ?></th>
        <th class="col-title"><?php echo __('Title') ?></th>
        <th class="col-number"><?php echo __('Number') ?></th>
        <th class="col-delete last"><?php echo __('Action') ?></th>
    </tr>
    </thead>
    <tfoot>
    <tr>
        <td colspan="4" class="last col-actions-add"><?php echo $this->getChildHtml('add_button') ?></td>
    </tr>
    </tfoot>
    <tbody id="track_row_container">
    <tr id="track_row_template" class="template no-display">
        <td class="col-carrier">
            <select name="tracking[__index__][carrier_code]" id="trackingC__index__" class="select carrier" disabled="disabled">
                <?php foreach ($this->getCarriers() as $_code=>$_name): ?>
                    <option value="<?php echo $_code ?>"><?php echo $this->escapeHtml($_name) ?></option>
                <?php endforeach; ?>
            </select>
        </td>
        <td class="col-title"><input class="input-text number-title" type="text" name="tracking[__index__][title]" id="trackingT__index__" value="" disabled="disabled" /></td>
        <td class="col-number"><input class="input-text required-entry" type="text" name="tracking[__index__][number]" id="trackingN__index__" value="" disabled="disabled" /></td>
        <td class="col-delete last"><a href="#" class="action- delete" onclick="trackingControl.deleteRow(event);return false"><span><?php echo __('Delete') ?></span></a></td>
    </tr>
    </tbody>
</table>
<script type="text/javascript">
require(['prototype'], function(){

    //<![CDATA[
    trackingControl.template = new Template('<tr>' + $('track_row_template').innerHTML.replace(/__index__/g, '#{index}') + '<\/tr>');
    //]]>

});
</script>
